<template>
  <div class="textAlign">
    <dc-row style="background: #ffffff;">
      <dc-col class="box2" span="7">
        <div @click="leftArrow"><span class=" iconfont icon-left"></span> <span>前一日</span></div>
      </dc-col>
      <dc-col class="box2" span="10">
        <span @click="opendatepicker" class="date-box">{{ showdate }} <i
          class=" iconfont icon-ic_shijianriqiqiehuan_arrowdown"></i></span>
      </dc-col>
      <dc-col class="box2" span="7">
        <div @click="rightArrow"><span>后一日</span> <span class=" iconfont icon-right"></span></div>
      </dc-col>
    </dc-row>
  </div>
</template>
<script>
  import {col, row} from '@/components/Flex';
  import common from './common.vue';
  import mintUi from '@/common/mintUi';

  export default {
    name: 'date',
    data () {
      return {
        datatype: 1,
        date: Date.parse(new Date())
      };
    },
    mixins: [common],
    methods: {
      //调取packer方法
      opendatepicker: function () {
        let crtdate = new Date(this.date);
        let that = this;
        this.$store.dispatch('setDatePiker', {
          value: crtdate.getFullYear() + '-' + (crtdate.getMonth() + 1) + '-' + (crtdate.getDate()),
          method: function (result) {
            if (that.isFuture(Date.parse(result))) {
              mintUi.openToast('暂无数据');
            } else {
              that.date = Date.parse(result);
            }
          }
        });
      }
    },
    components: {
      'dc-col': col,
      'dc-row': row
    }
  };
</script>
<style lang="scss" scoped>
  @import '../../assets/css/variable';

  .textAlign {
    text-align: center;
  }

  .boederBottom {
    border-bottom: 1px solid #e9e9e9;
  }

  .date-box {
    padding: px2rem(14px) px2rem(24px);
    color: #333;
    background: #f3f3f3;
    border-radius: px2rem(10px);
    i {
      font-size: px2rem(20px);
    }
  }

  .box {
    box-sizing: border-box;
    line-height: px2rem(85px);
    height: px2rem(70px);
    position: relative;
    overflow: hidden;
    color: #666666;
    font-size: px2rem(28px);
  }

  .box2 {
    line-height: px2rem(80px);
    color: #999;
    font-size: px2rem(26px);
    text-align: center;
    span {
      font-size: px2rem(26px);
    }
  }

  .box span {
    position: absolute;
    top: px2rem(64px);
    left: -100%;
    display: inline-block;
    width: 70%;
    height: px2rem(6px);
    background: $theme-color;
  }

  .box666 {
    width: 70%;
    margin: 0 15%;
    color: $theme-color;
    /*<!--border-bottom: 2px solid $theme-color;-->*/
  }

  .box666 span {
    left: 15%;
    /*transition: all .1s ease;*/
  }
</style>
